<ion-header>
    <ion-toolbar content-page>
        <ion-buttons start>
            <button ion-button icon-only (click)="backToProPage()">
                <i class="back">取消</i>
            </button>
        </ion-buttons>
        <ion-title>{{clientData?"编辑客户信息":"添加客户"}}</ion-title>
        <ion-buttons end>
            <button ion-button icon-only [disabled]="isDisabled" (click)=" checkCust($event)">
                <i>保存</i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<!--<ion-content (ionScroll)="onScroll()">-->
<ion-content (ionScroll)="onScroll()">
    <ion-list class="topList">
        <!--姓名-->
        <ion-item class="name device-pixel-border-bottom">
            <ion-label>姓名</ion-label>
            <ion-input #name class="nameInp"
                       [(ngModel)]="clientsModel.name" placeholder="请填写" maxlength="20"></ion-input>
        </ion-item>
        <!--性别-->
        <ion-item class="device-pixel-border-bottom" (click)="chooseSex()">
            <ion-label disabled class="sexLabel" >
                <i>性别</i>
                <span [ngClass]="clientsModel.sex=='请选择'?'chooseSex':''">{{clientsModel.sex}}</span>
            </ion-label>
            <ion-icon class="choose" item-end></ion-icon>
        </ion-item>
        <!--生日-->
        <ion-item class="device-pixel-border-bottom">
            <ion-label class="birChoose">生日</ion-label>
            <ion-datetime #birChoose cancelText="取消" doneText="确定"
                          displayFormat="YYYY/MM/DD" [(max)]="maxDate" placeholder="请选择"
                          [pickerOptions]="pickerOptions"
                          [yearValues]="getYearList(maxDateYear-100,maxDateYear)"
                          [(ngModel)]="clientsModel.birthDate">
            </ion-datetime>
            <ion-icon class="choose" item-end></ion-icon>
        </ion-item>
        <!--电话-->
        <ion-item-sliding #slidingItem
                          *ngFor="let a of clientsModel.mobileList;let i=index">
            <ion-item class="telPhone "
                      [ngClass]="i!==clientsModel.mobileList.length-1?'device-pixel-border-bottom':''">
                <ion-label class="span-label">电话{{i>0?(i+1):''}}</ion-label>

                <ion-input #tel type="tel" class="phone-number" (focus)="inputFocus($event)"
                           pattern="/[0-9]*/" placeholder="请填写"
                           [(value)]="clientsModel.mobileList[i].mobile"
                           (ionChange)="inputOnchange(i,$event)">
                </ion-input>

            </ion-item>
            <ion-item-options side="right" *ngIf="i!=0">
                <button item-end class="delPhone">
                    <span (click)="delLocalPhone(i,$event,a)">删除</span>
                </button>
            </ion-item-options>
        </ion-item-sliding>

        <!--添加电话 -->
        <ion-item class="phoneAndAddBox" (click)="addNewPhone($event)">
            <div class="phoneAndAdd">
                <img src="./assets/images/client/client-add/icon_add.png" alt="">
                添加电话
            </div>
        </ion-item>

        <!--地址 // 邮编-->
        <ion-item-sliding class="addressList" *ngFor="let a of clientsModel.addressList;let i=index"
                          [ngClass]="i!==clientsModel.addressList.length-1?'device-pixel-border-bottom':''">
            <ion-item>
                <ion-label class="addressLabel">
                    地址{{i>0?(i+1):''}}
                </ion-label>
                <ion-input #address class="addressInput" type="text"
                           (focus)="inputFocus($event)"
                           placeholder="请填写" maxlength="100"
                           [(ngModel)]="a.address" (blur)="inputBlur(i)">

                </ion-input>
                <ion-label class="postNumLabel">
                    邮编{{i>0?(i+1):''}}
                </ion-label>
                <ion-input class="postInput" #postNum type="tel" placeholder="请填写" (input)="inputOnchangePostCode(i,$event)"
                (focus)="inputFocus($event)" [(ngModel)]="a.postCode" maxlength="6"></ion-input>


                <!-- 定位 -->

                <ion-label class="phoneAndAddBox situation" (click)="setDefaultAddress(i,a.defaultIndicator)">
                    <!--<div class="">-->
                        <div class="phoneAndAdd" >
                            <img *ngIf="a.defaultIndicator==1" src="./assets/images/client/client-add/icon_pitchon.png"
                                 alt="" >
                            <img *ngIf="a.defaultIndicator!=1"
                                 src="./assets/images/client/client-add/icon_pitchout.png"
                                 alt="">
                            <span>{{a.defaultIndicator==1?"客户地图定位地址":"设为客户地图定位地址"}}</span>
                        </div>
                    <!--</div>-->
                </ion-label>



            </ion-item>
            <ion-item-options side="right" *ngIf="i!=0">
                <button item-end class="delPhone">
                    <span (click)="delLocalAddress(i,$event,a)">删除</span>
                </button>
            </ion-item-options>
        </ion-item-sliding>

        <!--添加地址-->
        <ion-item class="phoneAndAddBox addAddress">
            <div class="phoneAndAdd" (click)="addNewAddress($event)">
                <img src="./assets/images/client/client-add/icon_add.png" alt="">
                添加地址
            </div>
        </ion-item>
        <!--月收入-->
        <ion-item class="salary device-pixel-border-bottom">

            <ion-label>月收入</ion-label>
            <ion-input #salaryInput type="tel" placeholder="请填写"
                       (ionChange)="inputOnchangeSalary(i,salaryInput,$event)"
                       (focus)="inputFocus($event)"
                       maxlength="9" [(ngModel)]="clientsModel.income"></ion-input>
        </ion-item>
        <!--职业-->
        <ion-item class="device-pixel-border-bottom" (click)="chooseOccupation()">
            <ion-label disabled class="sexLabel" >
                <i>职业</i>
                <span [ngClass]="clientsModel.occupation=='请选择'?'chooseSex':''">{{clientsModel.occupation}}</span>
            </ion-label>
            <!--<ion-select placeholder="请选择" cancelText="取消" [selectOptions]="{cssClass:'mySel'}"-->
            <!--interface="action-sheet" [(ngModel)]="clientsModel.occupation">-->
            <!--<ion-option value="一般职业">一般职业</ion-option>-->
            <!--<ion-option value="一般商业">一般商业</ion-option>-->
            <!--<ion-option value="制造业">制造业</ion-option>-->
            <!--<ion-option value="农牧业">农牧业</ion-option>-->
            <!--<ion-option value="渔业">渔业</ion-option>-->
            <!--<ion-option value="木材,森林业">木材,森林业</ion-option>-->
            <!--<ion-option value="木材加工业">木材加工业</ion-option>-->
            <!--<ion-option value="矿石,采石业">矿石,采石业</ion-option>-->
            <!--<ion-option value="交通运输业">交通运输业</ion-option>-->
            <!--<ion-option value="餐旅业">餐旅业</ion-option>-->
            <!--<ion-option value="建筑工程业">建筑工程业</ion-option>-->
            <!--<ion-option value="服务业">服务业</ion-option>-->
            <!--<ion-option value="家庭管理">家庭管理</ion-option>-->
            <!--<ion-option value="治安人员">治安人员</ion-option>-->
            <!--<ion-option value="军人">军人</ion-option>-->
            <!--<ion-option value="咨讯业">咨讯业</ion-option>-->
            <!--<ion-option value="职业运动人员">职业运动人员</ion-option>-->
            <!--<ion-option value="新闻广告业">新闻广告业</ion-option>-->
            <!--<ion-option value="卫生、保健业">卫生、保健业</ion-option>-->
            <!--<ion-option value="娱乐业">娱乐业</ion-option>-->
            <!--<ion-option value="文教机关">文教机关</ion-option>-->
            <!--<ion-option value="司法">司法</ion-option>-->
            <!--<ion-option value="宗教团体">宗教团体</ion-option>-->
            <!--<ion-option value="公共事业">公共事业</ion-option>-->
            <!--<ion-option value="其他">其他</ion-option>-->
            <!--</ion-select>-->
            <ion-icon class="choose" item-end></ion-icon>
        </ion-item>
        <!--婚育-->
        <ion-item class="device-pixel-border-bottom">
            <ion-label>婚育</ion-label>
            <ion-select placeholder="请选择" cancelText="取消" #select1
                        interface="action-sheet" [(ngModel)]="clientsModel.marriageType">
                <ion-option value="1">已婚</ion-option>
                <ion-option value="2">未婚</ion-option>
                <ion-option value="3">其他</ion-option>
            </ion-select>
        </ion-item>
        <!--子女-->
        <ion-item class="device-pixel-border-bottom">
            <ion-label>子女</ion-label>
            <ion-select placeholder="请选择" cancelText="取消" #select2
                        interface="action-sheet" [(ngModel)]="clientsModel.childNum">
                <ion-option value="1">0个</ion-option>
                <ion-option value="2">1个</ion-option>
                <ion-option value="3">2个</ion-option>
                <ion-option value="4">3个及以上</ion-option>
            </ion-select>
        </ion-item>
        <!--住房-->
        <ion-item class="device-pixel-border-bottom">
            <ion-label>住房</ion-label>
            <ion-select placeholder="请选择" cancelText="取消" #select3
                        interface="action-sheet" [(ngModel)]="clientsModel.houseOwnership">
                <ion-option value="1">租房</ion-option>
                <ion-option value="2">自有</ion-option>
            </ion-select>
        </ion-item>
        <!--私家车-->
        <ion-item class="device-pixel-border-bottom">
            <ion-label>私家车</ion-label>
            <ion-select placeholder="请选择" cancelText="取消" #select4
                        interface="action-sheet" [(ngModel)]="clientsModel.carOwnership">
                <ion-option value="1">有</ion-option>
                <ion-option value="0">无</ion-option>
            </ion-select>
        </ion-item>
        <!--是否在其他公司购买保险-->
        <ion-item [ngClass]="clientsModel.otherIns==1?'device-pixel-border-bottom':''">
            <ion-label class="labelOther">是否在其他公司购买保险</ion-label>
            <ion-select (ionChange)="otherSelectChoose()" placeholder="请选择" cancelText="取消" #select5
                        interface="action-sheet" [(ngModel)]="clientsModel.otherIns">
                <ion-option value="1">有</ion-option>
                <ion-option value="0">无</ion-option>
            </ion-select>
        </ion-item>
        <!--购买类型-->
        <ion-item *ngIf="clientsModel.otherIns==1" class="otherType" >
            <ion-label class="labelType">购买类型</ion-label>
            <ion-select placeholder="请选择"  cancelText="取消" #select6 interface="action-sheet"
                        [selectOptions]="{cssClass:'insTypeSel'}"
                        [(ngModel)]="clientsModel.insType">
                <ion-option value="1">儿童成长</ion-option>
                <ion-option value="2">养老规划</ion-option>
                <ion-option value="3">健康保障</ion-option>
                <ion-option value="4">人身保障</ion-option>
                <ion-option value="5">财富保障</ion-option>
            </ion-select>
        </ion-item>
        <!--<ion-item class="insType">-->
            <!--&lt;!&ndash;<ion-label disabled class="sexLabel" >&ndash;&gt;-->
                <!--<i>购买类型</i>-->
                <!--<span [ngClass]="clientsModel.insType=='请选择'?'chooseSex':''">{{clientsModel.insType}}</span>-->
            <!--&lt;!&ndash;</ion-label>&ndash;&gt;-->


            <!--<ion-icon class="choose" item-end></ion-icon>-->
        <!--</ion-item>-->
    </ion-list>
</ion-content>
<!--<div class="action-sheet-ins">-->
    <!--<span>购买类型</span>-->
    <!--<p  (click)="otherType(1,'儿童成长')">儿童成长</p>-->
    <!--<p  (click)="otherType(2,'养老规划')">养老规划</p>-->
    <!--<p  (click)="otherType(3,'健康保障')">健康保障</p>-->
    <!--<p  (click)="otherType(4,'人身保障')">人身保障</p>-->
    <!--<p  (click)="otherType(5,'财富保障')">财富保障</p>-->
<!--</div>-->

